<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.warper {
			border: 1px solid black;
			width: 300px;
			/* height: 300px;  */
			/* overflow: hidden;  */
		}
		.float {
			float: left;
			background-color: red;
			width: 100px;
			height: 100px; 
		}
		p {
			float: left;
			height: 100px;
			margin-left: -100px;
			width: 100px;
			background-color: black;
		}
	</style>
</head>
<body>
	<div class="warper">
		<div class="float" style="opacity: 0.5">1</div>
		<div class="float" style="opacity: 0.5">2</div>
		<div class="float"  style="opacity: 0.5">3</div>
		<!-- <div class="float" style="">4</div> -->

		<!-- <span>123</span> -->
		<!-- <span></span> -->
	</div>
</body>
</html>